<template>
  <div>
    <ListTab v-model="activeId" :tabs="tabList" :show-header="!showMobilePage" is-table @tabClick="handleTabClick" />
    <div :class="{'mobile-table mobile-pt mobile-min-height':showMobilePage}" class="table-list min-fill-page">
      <DataDisplay
        :data-list="statisticsList"
        class="mb16 mobile-data"
      />
      <div v-if="!showMobilePage" class="relative mb16 filter">
        <FilterInput ref="FilterToolRef" v-model="paramsObj" :default-select-key="defaultSelectKey" :is-show-filter="isShowFilter" :filter-list="filterList" show-search-btn @handelClick="queryClick" @queryEmpty="queryEmpty" @filterTagStatus="filterTagStatus" />
        <div class="current-user-action-box">
          <el-checkbox v-model="isShowMe" style="margin-right: 20px;" @change="queryClick" >我发起的</el-checkbox>
          <el-checkbox v-model="isMyApproval" style="margin-right: 20px;" @change="queryClick" >我审批的</el-checkbox>
          <el-checkbox v-model="isMyPending" @change="queryClick" >待我处理</el-checkbox>
        </div>
        <createBtn v-if="hasRouteAuth('crm:loan:create') || isAdmin" style="margin-right: 10px;" @click.native="toCreate"/>
        <MoreOpeator
          ref="moreOpeatorRef"
          :list="moreOperatorList"
        />
      </div>
      <div v-loading="listLoading" style="min-height: 300px">
        <u-table
          v-if="list.items.length > 0"
          ref="loanTableRef"
          :data="list.items"
          :row-class-name="tableRowClassName"
          :height="setTableHeight"
          :row-height="rowHeight()"
          :border="true"
          beautify-table
          header-drag-style
          use-virtual
          class="fb-table"
          element-loading-text="加载中..."
          empty-text="暂无数据"
          header-cell-class-name="order-data-header-cell"
          fit
          hightlight-current-row
          @select="selectTable"
          @select-all="selectTable"
          @sort-change="sortMethod">
          <u-table-column
            :fixed="selectFixed"
            align="center"
            type="selection"
            width="50"/>
          <u-table-column :min-width="handleTdWidth()" align="left" label="审批单号" label-class-name="diy-cell" class-name="diy-cell">
            <template slot-scope="scope" slot="header">
              <div class="diyHeader">{{ scope.column.label }}</div>
            </template>
            <template slot-scope="scope">
              <processSn :is-expedited="scope.row.isExpedited">
                <div class="light-word" @click="toDetail(scope.row)">
                  <ToolTip :content="handleSnNumber(scope.row.approvalNum)" is-can-click @handelClick="toDetail(scope.row)"/>
                </div>
              </processSn>
            </template>
          </u-table-column>
          <u-table-column align="left" label="借款说明" width="120">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.remark" />
            </template>
          </u-table-column>
          <u-table-column align="right" label="借款金额(元)" width="130" prop="amount" sortable="custom">
            <template slot-scope="scope">
              <PriceColumn :real-val="scope.row.amount" :price="scope.row.amount / 100" />
            </template>
          </u-table-column>
          <u-table-column align="left" label="借款周期" width="220" prop="loanDate" sortable="custom">
            <template slot-scope="scope">
              <el-tooltip v-if="scope.row.loanStartDate || scope.row.loanEndDate" :open-delay="800" class="item" placement="top" effect="dark">
                <div slot="content">{{ standardFormat(scope.row.loanStartDate, 'YYYY/MM/DD') }} - {{ standardFormat(scope.row.loanEndDate, 'YYYY/MM/DD') }}</div>
                <div>{{ standardFormat(scope.row.loanStartDate, 'YYYY/MM/DD') }} - {{ standardFormat(scope.row.loanEndDate, 'YYYY/MM/DD') }}</div>
              </el-tooltip>
              <span v-else>--</span>
            </template>
          </u-table-column>
          <u-table-column align="left" label="申请人">
            <template slot-scope="scope">
              <CheckUserInfo v-if="scope.row.applicant" :label="scope.row.applicant" :user-id="scope.row.applicantId" />
              <div v-else>--</div>
            </template>
          </u-table-column>
          <u-table-column align="left" label="当前节点">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.currentNode" />
            </template>
          </u-table-column>
          <u-table-column :min-width="handleTdWidth(120,150)" align="left" label="当前处理人">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.currentHandler" />
            </template>
          </u-table-column>
          <u-table-column align="left" label="状态" width="100">
            <template slot-scope="scope">
              <StatusText
                v-if="scope.row.status || scope.row.status===0"
                :color="['#FFBC3D','#FD8546', '#FF4E5F', '#999', '#31CC9C','#406EFF'][scope.row.status]"
                :text="scope.row.status | energyStatus" />
              <div v-else>--</div>
            </template>
          </u-table-column>
          <u-table-column align="left" label="计划支付日期" min-width="130" prop="planPaymentDate" sortable="custom">
            <template slot-scope="scope">
              <ToolTip :content="standardFormat(scope.row.planPaymentDate, 'YYYY/MM/DD')" />
            </template>
          </u-table-column>
          <u-table-column align="left" label="实际支付日期" min-width="130" prop="actualPaymentDate" sortable="custom">
            <template slot-scope="scope">
              <ToolTip :content="standardFormat(scope.row.actualPaymentDate, 'YYYY/MM/DD')" />
            </template>
          </u-table-column>
          <u-table-column align="left" label="创建人">
            <template slot-scope="scope">
              <CheckUserInfo v-if="scope.row.creator" :label="scope.row.creator" :user-id="scope.row.creatorId" />
              <div v-else>--</div>
            </template>
          </u-table-column>
          <u-table-column align="left" label="申请部门">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.applyDepartment" />
            </template>
          </u-table-column>
          <u-table-column align="left" label="所属公司">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.company" />
            </template>
          </u-table-column>
          <u-table-column align="left" label="所属部门">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.subordinateDepartment" />
            </template>
          </u-table-column>
          <u-table-column align="left" label="创建时间" width="150" prop="createTime" sortable="custom">
            <template slot-scope="scope">
              <div v-if="scope.row.createTime">{{ standardFormat(scope.row.createTime, 'YYYY/MM/DD HH:mm') }}</div>
              <span v-else>--</span>
            </template>
          </u-table-column>
          <u-table-column :width="operateWidth" fixed="right" align="left" label="操作">
            <template slot-scope="scope">
              <div class="flex">
                <div v-if="scope.row.status !== 0 && !showMobilePage" class="button-text bold" @click="toDetail(scope.row)">查看</div>
                <MoreOpeator
                  :list="[
                    {label: '查看', handelClick: () => {toDetail(scope.row)}, auth: showMobilePage && scope.row.status !== 0},
                    {label: '复制', handelClick: () => {handlerCreateNew(scope.row)}, disabled: scope.row.status === 0 || !hasRouteAuth('crm:loan:create')},
                    {label: '编辑', handelClick: () => {handleEdit(scope.row)}, disabled: setEditDisable(scope.row)},
                    {label: '删除', handelClick: () => {handleDelete(scope.row)}, disabled: setDelDisable(scope.row)},
                  ]"
                >
                  <div v-if="!showMobilePage" slot="button" :class="{'bl':scope.row.status !== 0}" class="button-text bold">更多<i class="el-icon-arrow-down"/></div>
                  <el-image v-else slot="button" :src="operateBtns" class="dropdown-img"/>
                </MoreOpeator>
              </div>
            </template>
          </u-table-column>
        </u-table>
        <empty-placeholder v-else-if="!list.isInit"/>
      </div>
      <el-row v-if="showMobilePage" type="flex" justify="left">
        <el-pagination
          v-show="list.total > 0"
          :current-page.sync="page"
          :page-size="perPage"
          :total="list.total"
          :small="true"
          :page-sizes="[20, 50, 100, 250, 500]"
          :layout="pageLayout"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
      <fixed-pagination v-if="list.total > 0 && !showMobilePage || showMobilePage">
        <template v-if="showMobilePage">
          <FilterInput ref="FilterToolRef" v-model="paramsObj" :default-select-key="defaultSelectKey" :is-show-filter="isShowFilter" :filter-list="filterList" show-mobile-icon show-search-btn @handelClick="queryClick" @queryEmpty="queryEmpty" @filterTagStatus="filterTagStatus">
            <div slot="checkGroup">
              <el-checkbox v-model="isShowMe" style="margin-right: 20px;" @change="queryClick" >我发起的</el-checkbox>
              <el-checkbox v-model="isMyApproval" @change="queryClick" >我审批的</el-checkbox>
              <el-checkbox v-model="isMyPending" @change="queryClick" >待我处理</el-checkbox>
            </div>
          </FilterInput>
          <MoreOpeator
            ref="moreOpeatorRef"
            :list="moreOperatorList"
            show-mobile-icon
          />
          <createBtn v-if="hasRouteAuth('crm:loan:create') || isAdmin" mobile-table @click.native="toCreate"/>
        </template>
        <template v-else>
          <SelectionNum :select-item="multipleSelectionAll" @clearMixinSelection="clearMixinSelection" />
          <div style="flex: 1;" />
          <el-pagination
            v-show="list.total > 0"
            :current-page="list.page"
            :page-size="list.perPage"
            :total="list.total"
            :page-sizes="[20, 50, 100, 250, 500]"
            layout="total, prev, pager, next, sizes, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </template>
      </fixed-pagination>
    </div>
    <ApproverChange ref="approverChangeDialog" :business-type="BUSINESS_TYPE.LOAN" :ids="curSelectedId" @changeCallBack="changeCallBack"/>
    <DiversAuditorDialog ref="auditorDialog" :can-empty="false" @handleSender="handleBatchSender" />
  </div>
</template>

<script>
import { getLoanTab, getLoanStatistics, getLoanList, deleteLoan } from '@/api/loan';
import { getDepartmentAll } from '@/api/config';
import ListTab from '@/components/ListTab';
import createBtn from '@/components/Common/baseComponent/createBtn';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import DataDisplay from '@/components/Common/baseComponent/dataDisplay';
import { standardFormat } from '@/filters/date';
import { hasRouteAuth } from '@/utils/permission';
import { paramsRangeFormat, paramsAryToStr } from '@/utils/paramsFormat';
import { CURRENT_NODE_MODULE, OUR_TITLE_MODULE } from '@/utils/const';
import tableSelections from '@/mixins/tableSelections';
import TableAdaptive from '@/mixins/tableAdaptive';
import mobileTable from '@/mixins/mobileTable';
import MoreOpeator from '@/components/Common/baseComponent/moreOpeator';
import DiversAuditorDialog from '@/components/Common/auditProcess/module/diversAuditorDialog';
import isAdmin from '@/mixins/isAdmin';
import filterObjStoreMixin from '@/mixins/filterObjStore';
import { mapState } from 'vuex';
import { showModal } from '@/utils/message';
import { commonOptions } from '@/utils/tools';
import { energyStatus } from '@/filters/status';
import { expeditedOptions } from '@/filters/status';
import { PROCESS_TYPE } from '@/utils/const/process';
import copyLink from '@/mixins/copyLink';
import schedule from '@/mixins/schedule';
import approverChange from '@/mixins/approverChange';
import { getModuleOurTitle } from '@/api/invoice';
import icon_7 from '@/assets/dataDisplay/icon_7.png';
import icon_32 from '@/assets/dataDisplay/icon_32.png';
import icon_33 from '@/assets/dataDisplay/icon_33.png';
import icon_34 from '@/assets/dataDisplay/icon_34.png';
import icon_27 from '@/assets/dataDisplay/icon_27.png';
import icon_8 from '@/assets/dataDisplay/icon_8.png';

export default {
  components: {
    ListTab,
    EmptyPlaceholder,
    DataDisplay,
    MoreOpeator,
    createBtn,
    DiversAuditorDialog
  },
  filters: { energyStatus },
  mixins: [
    tableSelections,
    isAdmin,
    TableAdaptive,
    mobileTable,
    filterObjStoreMixin,
    copyLink,
    schedule,
    approverChange
  ],
  data() {
    return {
      isShowMe: false,
      isMyApproval: false,
      isMyPending: false,
      isUmyTable: true,
      tabList: [],
      activeId: -1,
      listLoading: false,
      page: 1,
      perPage: 20,
      sortName: '',
      sortType: '',
      list: {
        items: [],
        page: 1,
        perPage: 20,
        total: 0,
        isInit: true
      },
      paramsObj: {},
      departmentOption: [],
      isShowFilter: false,
      tableRefName: 'loanTableRef', // 表格的ref名称
      idKey: 'id', // 唯一表示字段
      ids: '',
      statisticsList: [],
      rangeKeyArr: [
        { attr: 'loanDate', start: 'loanStartDate', end: 'loanEndDate', type: 'time', addTime: true },
        { attr: 'createTime', start: 'createStartTime', end: 'createEndTime', type: 'time', addTime: true },
        { attr: 'planPaymentDate', start: 'planPaymentStartDate', end: 'planPaymentEndDate', type: 'time', addTime: true },
        { attr: 'actualPaymentDate', start: 'actualPaymentStartDate', end: 'actualPaymentEndDate', type: 'time', addTime: true },
        { attr: 'amount', start: 'amountStart', end: 'amountEnd', type: 'moneyFixed' }
      ],
      arrayKeyArr: ['applyDepartmentId', 'subordinateDepartmentId', 'currentNode'],
      companies: [],
      defaultSelectKey: ''
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    activeName() {
      const item = this.tabList.find(i => i.id === this.activeId);
      return item ? item.name : '全部';
    },
    filterList() {
      const arr = [
        // 输入框
        { keyword: 'approvalNum', name: '审批单号', labelWidth: '100px', type: 'input' },
        { keyword: 'remark', name: '借款说明', labelWidth: '100px', type: 'input' },
        { keyword: 'applicant', name: '申请人', labelWidth: '100px', type: 'input' },
        { keyword: 'currentHandler', name: '当前处理人', labelWidth: '100px', type: 'input' },
        { keyword: 'creator', name: '创建人', labelWidth: '100px', type: 'input' },
        { keyword: 'comment', name: '评论', type: 'input', labelWidth: '100px' },
        { keyword: 'approvalComment', name: '审批意见', type: 'input', labelWidth: '100px' },
        { keyword: 'amount', name: '借款金额', labelWidth: '100px', type: 'inputRange',
          isRequired: true, startPlaceholder: '最低金额', endPlaceholder: '最高金额', max: 999999999 },
        // 下拉
        { keyword: 'status', name: '状态', type: 'select', options: commonOptions },
        { keyword: 'company', name: '所属公司', type: 'select', valueName: 'label', options: this.companies },
        { keyword: 'applyDepartmentId', name: '申请部门', type: 'cascaderSelectWithChild', childrenVal: 'children',
          options: this.departmentOption },
        { keyword: 'subordinateDepartmentId', name: '所属部门', type: 'cascaderSelectWithChild', childrenVal: 'children',
          options: this.departmentOption },
        {
          keyword: 'currentNode',
          name: '当前节点',
          type: 'loadMoreSelect',
          valueName: 'name',
          directShow: true,
          multiple: true,
          extendParams: { type: CURRENT_NODE_MODULE.LOAN },
          labelName: 'name',
          placeholder: '当前节点',
          searchkeyword: 'keyword',
          apiUrl: 'admin/common/currentNodes'
        },
        { keyword: 'isExpedited', name: '是否加急', type: 'select', options: expeditedOptions },
        { keyword: 'loanDate', name: '借款周期', labelWidth: '100px', timeType: 'daterange', type: 'rangeDate' },
        { keyword: 'createTime', name: '创建时间', labelWidth: '100px', timeType: 'daterange', type: 'rangeDate' },
        { keyword: 'planPaymentDate', name: '计划支付日期', labelWidth: '100px', timeType: 'daterange', type: 'rangeDate' },
        { keyword: 'actualPaymentDate', name: '实际支付日期', labelWidth: '100px', timeType: 'daterange', type: 'rangeDate' }
      ];
      return arr;
    },
    tableOutsideHeight() {
      return this.showMobilePage ? 256 : 272;
    },
    moreOperatorList() {
      return [
        { label: '批量导出', exportApi: `admin/loan/export`, auth: hasRouteAuth('crm:loan:batchExport'), type: 'export', exportName: '借款审批', isBeforeExport: true, beforeExport: this.exportBeforeExport, refName: 'loanExportRef' },
        { label: '批量抄送', handelClick: this.handleSendMsg },
        { label: '复制链接', handelClick: this.batchCopyLink },
        { label: '批量转交', handelClick: () => this.handleBatchApproverChange(this.BUSINESS_TYPE.LOAN) }
      ];
    }
  },
  watch: {
    list: {
      handler(val) {
        this.$nextTick(() => {
          if (this.setSelectRow) this.setSelectRow(val.items);
        });
      },
      deep: true
    }
  },
  created() {
    this.queryDeptTreeList();
    this.getCompany();
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'loanDetail') {
      to.meta.isChange = true;
    } else {
      to.meta.isChange = false;
    }
    next();
  },
  activated() {
    if (!this.$route.meta.isChange) {
      this.paramsObj = {};
      this.isShowFilter = false;
      this.activeId = this.$route.query.tabStatus !== undefined ? Number(this.$route.query.tabStatus) : -1;
      if (this.$route.query.proposer) {
        this.$set(this.paramsObj, 'applicant', this.$route.query.proposer);
        this.$set(this.paramsObj, 'status', 4);
        this.defaultSelectKey = 'applicant';
      }
      this.fetchData(true);
      this.getCompany();
    } else {
      if (this.list && this.list.items && this.list.items.length === 0) {
        this.fetchData(true);
      } else {
        this.fetchData();
      }
    }
  },
  methods: {
    standardFormat,
    hasRouteAuth,
    getDetailLink(item) {
      if (!item.status) return null;
      return `${location.origin}#/businessPage/loanDetail?id=${item.id}&processId=${item.processId}`;
    },
    getCompany() {
      getModuleOurTitle(OUR_TITLE_MODULE.LOAN).then(res => {
        if (res.code === 200) {
          const result = [];
          res.data.forEach(item => {
            result.push({
              value: item.id,
              label: item.name,
              isStringVal: true,
              name: '所属公司'
            });
          });
          this.companies = result;
        }
      });
    },
    exportBeforeExport() {
      const params = this.formatParams();
      if (this.multipleSelectionAll.length) {
        params.ids = this.multipleSelectionAll.map(el => el.id).join(',');
      }
      if (this.$refs.moreOpeatorRef) {
        this.$refs.moreOpeatorRef.btnExport(params, 'loanExportRef');
      }
    },
    // 获取部门
    queryDeptTreeList() {
      getDepartmentAll().then(res => {
        this.departmentOption = (res && res.data) || [];
      }).catch(e => {
        console.log(e);
      });
    },
    toCreate() {
      this.$router.push({
        name: 'createLoan'
      });
    },
    formatParams(sendPageConfig = true) {
      const { page, perPage, activeId, paramsObj, activeName, sortName, sortType } = this;
      const params = JSON.parse(JSON.stringify(paramsObj));
      // 设置tab
      if (activeName !== '全部') params.tabStatus = activeId;
      paramsRangeFormat(this.rangeKeyArr, params);
      paramsAryToStr(this.arrayKeyArr, params);
      if (sendPageConfig) {
        params.page = page;
        params.perPage = perPage;
      }
      params.sortName = sortName || '';
      params.sortType = sortType || '';
      params.isShowMe = this.isShowMe;
      params.isMyApproval = this.isMyApproval;
      params.isMyPending = this.isMyPending;
      return params;
    },
    fetchData(reset = false) {
      if (reset) this.page = 1;
      const params = this.formatParams();
      this.getTabList(params);
      this.getCostData(params);
      this.listLoading = true;
      getLoanList(params).then(({ data = {}} = {}) => {
        data.items.map(item => {
          if (item.department && item.department.length) item.departmentName = item.department.map(i => i.name).join(',');
          return item;
        });
        this.list = data;
      }).catch(e => {
        console.error(e);
      }).finally(() => {
        this.list.isInit = false;
        this.listLoading = false;
      });
    },
    sortMethod(a) {
      if (!a.order) {
        this.sortName = '';
        this.sortType = '';
      } else {
        this.sortName = a.prop;
        this.sortType = a.order === 'ascending' ? 1 : -1;
      }
      this.fetchData();
    },
    // 获取顶部Tab列表（成本状态）
    async getTabList(params = {}) {
      try {
        const result = await getLoanTab(params);
        const { code, data = [] } = result;
        if (code === 200) {
          // 只展示待结算、结算中的数量；
          // loan 只展示待提交、审批中的数量；
          data.forEach((tab) => {
            tab.num = (tab.id === 0 || tab.id === 1) ? tab.num : 0;
          });
          this.tabList = data;
        }
      } catch (error) {
        this.tabList = [
          { id: -1, name: '全部', num: 0 },
          { id: 0, name: '待提交', num: 0 },
          { id: 1, name: '审批中', num: 0 },
          { id: 2, name: '已完成', num: 0 },
          { id: 3, name: '已作废', num: 0 }
        ];
        console.log(error);
      }
    },
    setEditDisable(data) {
      return !(data.status === 0 && data.creator === this.userInfo.userName);
    },
    setDelDisable(data) {
      const statusArr = [0, 2, 3, 5];// 草稿、已撤销、未过审、待提交
      return !(statusArr.includes(data.status) && (data.creator === this.userInfo.userName || this.hasRouteAuth('crm:loan:delete')));// 除审批中和已完成状态且为创建人或者有删除权限
    },
    handleTabClick(id) {
      this.activeId = id;
      this.fetchData(true);
    },
    queryClick() {
      this.fetchData(true);
    },
    queryEmpty() {
      this.paramsObj = {};
      this.isShowMe = false;
      this.isMyApproval = false;
      this.isMyPending = false;
      this.fetchData(true);
    },
    handleSizeChange(perPage) {
      this.perPage = perPage;
      this.fetchData(true);
    },
    handleCurrentChange(page) {
      this.page = page;
      this.fetchData();
    },
    toDetail(item) {
      this.filterObjStore(PROCESS_TYPE.LOAN);
      this.$router.push({
        name: 'loanDetail',
        query: {
          id: item.id,
          processId: item.processId,
          fromList: 1
        }
      });
    },
    // 获取统计数据
    async getCostData(paramsObj = '') {
      try {
        const params = paramsObj ? JSON.parse(JSON.stringify(paramsObj)) : this.formatParams(false);
        const { page, perPage } = params;
        if (page) delete params.page;
        if (perPage) delete params.perPage;
        const res = await getLoanStatistics(params);
        const { code, data = {}} = res;
        if (code === 200) {
          const { loanAmount, offsetLoanAmount, repaymentAmount, owedAmount, transferAmount, transfereeAmount } = data;
          this.statisticsList = [
            { data: (loanAmount / 100).toFixed(2), label: '借款金额', tooltip: '统计列表所有借款审批借款金额之和', icon: icon_7 },
            { data: (offsetLoanAmount / 100).toFixed(2), label: '冲抵借款欠额', tooltip: '统计员工报销列表总冲抵借款欠额之和', icon: icon_32 },
            { data: (repaymentAmount / 100).toFixed(2), label: '还款金额', tooltip: '统计还款列表总还款金额之和', icon: icon_33 },
            { data: (transferAmount / 100).toFixed(2), label: '转交欠款', tooltip: '统计转交欠款列表当前用户可读的转交欠款总额', icon: icon_27 },
            { data: (transfereeAmount / 100).toFixed(2), label: '被转交欠款', tooltip: '统计转交欠款列表当前用户可读的被转交欠款总额', icon: icon_8 },
            { data: (owedAmount / 100).toFixed(2), label: '借款欠额', tooltip: '借款欠额=借款金额-还款金额-冲抵借款欠额-转交欠款+被转交欠款', icon: icon_34 }
          ];
        }
      } catch (error) {
        console.log(error);
      }
    },
    handleEdit(row) {
      this.$router.push({
        name: 'loanEdit',
        params: { id: row.id }
      });
    },
    handleDelete(row) {
      showModal('确定删除该借款申请?', '', {
        iconClass: 'del-icon'
      }).then(() => {
        deleteLoan(row.id).then(res => {
          this.$message.success('删除成功');
          if (this.page > 1 && this.perPage * (this.page - 1) + 1 === this.list.total) {
            this.page--;
          }
          this.resetItemSelected(row.id);
          this.fetchData();
        }).catch(err => { console.log(err); });
      }).catch(() => {
        return false;
      });
    },
    handlerCreateNew(row) {
      const routeUrl = this.$router.resolve({
        name: 'loanEdit',
        params: { id: row.id },
        query: { reapplyId: row.processId, createNew: 1 }
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>
<style lang="scss" scoped>
.table-list {
  margin: 16px 16px 0 16px;
  background-color: #fff;
  padding: 20px 20px 55px 20px;
  .filter{
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    position: relative;
    .current-user-action-box {
      position: absolute;
      left: 488px;
      top: 6px;
      display:flex;
      align-items:center;
    }
  }
}
.light-word {
  color: #406eff;
  cursor: pointer;
}
</style>
